<script setup>
import {
    Edit, Delete, Position, Upload
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    addclientservice, updatecilentservice, deleteclientservice, getpartclientservice, addkeymanservice,
    updatekeymanservice, getpartkeymanservice, getClientsComesByClientCompanyidservice
} from '@/api/client.js'
import {
    getareaservice,getallareaservice
} from '@/api/book.js'

import {
    getAllChanceByClientIdservice
} from '@/api/chance.js'
//控制添加分类弹窗
const dialogVisible = ref(false)
const dialogVisiblekey = ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型

//项目机会
const chances = ref([]);


//定义变量，控制标题
const title = ref('')
const titlekey = ref('')
//交通路线列表数据模型
const clients = ref([{}, {}])
const keymans = ref([{}, {}])
const areas = ref([]);
const clientscomes = ref([])
const buyfields = ref(['潜在客户', '新客户', '忠实客户', '流失客户'])
const diqus = ref(['上海', '北京', '重庆', '成都', '南京', '西安'])
const getareas = async () => {
    let res = await getareaservice({
        pageNum: 1,
        pageSize: 1000,
        str: '',
    })
    areas.value = res.data.items
}
getareas();
const getclientscomes = async () => {
    let res = await getClientsComesByClientCompanyidservice(findmodelkey.value)
    console.log(res);
    clientscomes.value = res.data
}
const pathmodel = ref({
    id: null,
    clientcompanyname: null,
    areaname: null,
    pet: null,
    address: null,
    diqu: null,
    buyfield: null,
    orderdaibiao: null,
    invoicephone: null,
    phone: null,
    fax: null,
    zipcode: null,
    invoiceaddress: null,
    invoicebank: null,
    bankaccount: null,
    tax: null,
    comment: null,
    credit: null,
    owed: null
})
const pathmodelkey = ref({
    id: null,
    clientcompanyid: null,
    code: null,
    name: null,
    nickname: null,
    sex: null,
    boss: null,
    home: null,
    zhiwu: null,
    birthday: null,
    hobby: null,
    ismarry: null,
    isprime: null,
    comment: null,
})
const findmodelByChance = ref({
    pageNum: 1,
    pageSize: 5,
    str: '',
    findType: ''
})

const findmodel = ref({
    pageNum: 1,
    pageSize: 5,
    str: ''
})
const findmodelkey = ref({
    clientcompanyid: null,
    str: '',
})
const stafflist = async () => {
    console.log(findmodel.value);
    let result = await getpartclientservice(findmodel.value);
    console.log(result);
    total.value = result.data.total;
    clients.value = result.data.items;
    getAllArea();
}
stafflist();
const stafflistkeyman = async () => {
    console.log(findmodelkey.value);

    let result = await getpartkeymanservice(findmodelkey.value);
    console.log(result);
    keymans.value = result.data
}

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    findmodel.value.pageSize = size;
    stafflist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    findmodel.value.pageNum = num;
    stafflist();
}
const cleardata = () => {
    findmodel.value.str = ''
}
const cleardatakey = () => {
    findmodelkey.value.str = ''
}
//表单校验
const rules = {
    clientcompanyname: [{ required: true, message: '请输入单位名称', trigger: 'blur' },],
    areaname: [{ required: true, message: '请选择所属区域', trigger: 'blur' },],
    pet: [{ required: true, message: '请选择所属行业', trigger: 'blur' },],
    address: [{ required: true, message: '请输入公司地址', trigger: 'blur' },],
    diqu: [{ required: true, message: '请选择地区', trigger: 'blur' },],
    buyfield: [{ required: true, message: '请选择买方属性', trigger: 'blur' },],
    orderdaibiao: [{ required: true, message: '请输入订货代表', trigger: 'blur' },],
    invoicephone: [{ required: true, message: '请输入开票电话', trigger: 'blur' },],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },],
    zipcode: [{ required: true, message: '请输入邮编', trigger: 'blur' },],
    invoiceaddress: [{ required: true, message: '请输入开票地址', trigger: 'blur' },],
    invoicebank: [{ required: true, message: '请输入开票银行', trigger: 'blur' },],
    bankaccount: [{ required: true, message: '请输入银行账号', trigger: 'blur' },],
    tax: [{ required: true, message: '请输入税号', trigger: 'blur' },],
    comment: [{ required: true, message: '请输入备注', trigger: 'blur' },],
    credit: [{ required: true, message: '请输入信用等级', trigger: 'blur' },],
    owed: [{ required: true, message: '请输入欠款', trigger: 'blur' },],
    fax: [{ required: true, message: '请输入传真', trigger: 'blur' },],
}
const ruleskey = {
    code: [{ required: true, message: '请输入联系人编码', trigger: 'blur' },],
    name: [{ required: true, message: '请输入联系人名称', trigger: 'blur' },],
    nickname: [{ required: true, message: '请输入称呼', trigger: 'blur' },],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' },],
    boss: [{ required: true, message: '请输入直接上级', trigger: 'blur' },],
    home: [{ required: true, message: '请输入籍贯', trigger: 'blur' },],
    zhiwu: [{ required: true, message: '请选择职务', trigger: 'blur' },],
    birthday: [{ required: true, message: '请选择生日', trigger: 'blur' },],
    hobby: [{ required: true, message: '请选择爱好', trigger: 'blur' },],
    ismarry: [{ required: true, message: '请选择婚姻状况', trigger: 'blur' },],
    isprime: [{ required: true, message: '是否主要联系人', trigger: 'blur' },],
    comment: [{ required: true, message: '请输入备注', trigger: 'blur' },],
}
const add = () => {
    for (let key in pathmodel.value) {
        if (pathmodel.value.hasOwnProperty(key)) {
            pathmodel.value[key] = null;
        }
    }
    dialogVisible.value = true;
    title.value = '添加客户'
}
const addkey = () => {
    for (let key in pathmodelkey.value) {
        if (pathmodelkey.value.hasOwnProperty(key)) {
            pathmodelkey.value[key] = null;
        }
    }
    dialogVisiblekey.value = true;
    titlekey.value = '添加客户关键人物'
}
const formref = ref(null); //表单校验
const formrefkey = ref(null); //表单校验
const addstaff = async () => {
    console.log(pathmodel.value);
    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await addclientservice(pathmodel.value);
            console.log(result);
            if (result.code == 0) {
                ElMessage.success("添加成功")
                dialogVisible.value = false;
                stafflist();
            }
            else ElMessage.error(result.message ? result.message : '添加失败')
        }
    });
}
const addstaffkey = async () => {
    console.log(pathmodelkey.value);
    formrefkey.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            pathmodelkey.value.clientcompanyid = pathmodel.value.id;
            let result = await addkeymanservice(pathmodelkey.value);
            console.log(result);
            if (result.code == 0) {
                ElMessage.success("添加成功")
                dialogVisiblekey.value = false;
                stafflistkeyman();
            }
            else ElMessage.error(result.message ? result.message : '添加失败')
        }
    });
}
const updatestaff = async () => {
    console.log(pathmodel.value);
    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await updatecilentservice(pathmodel.value);
            if (result.code == 0) {
                ElMessage.success("修改成功")
                dialogVisible.value = false;
                stafflist();
            }
            else ElMessage.error(result.message ? result.message : '修改失败')
        }
    });
}
const updatestaffkey = async () => {
    console.log(pathmodelkey.value);
    formrefkey.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {
            let result = await updatekeymanservice(pathmodelkey.value);
            if (result.code == 0) {
                ElMessage.success("修改成功")
                dialogVisiblekey.value = false;
                stafflistkeyman();
            }
            else ElMessage.error(result.message ? result.message : '修改失败')
        }
    });
}
//删除分类
const del = (row) => {
    ElMessageBox.confirm(
        '你确认删除该条信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            let result = await deleteclientservice(row.id)
            if (result.code != 0) ElMessage.error(result.message ? result.message : '删除失败')
            else ElMessage.success('删除成功')
            stafflist();
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


const areasInfo = ref([])


const getAllArea = async () => {
    let result = await getallareaservice();

    
    areasInfo.value = result.data;
    // console.log("片区数据是" + JSON.stringify(areasInfo.value));
}


//获取该客户的所有机会
const getAllChanceByClientId = async() =>{

    let result = await getAllChanceByClientIdservice(findmodelByChance.value);
    chances.value = result.data;

chances.value.forEach((chance) => {
    let areasArray = chance.areas.split(',').map(Number);
    

    const areaNames = areasArray.map(areaId => {
  // 找到对应的area信息
  const area = areasInfo.value.find(info => info.id === areaId);
  // 返回area的name，如果area不存在则返回空字符串
  return area ? area.name : '';
}).filter(name => name); // 过滤掉空字符串





    // 将格式化的area names赋值给chances数组中的areas属性
chance.areas = areaNames.join(',');
console.log("机会信息2:" + JSON.stringify(chance.areas));
})

//console.log("机会信息2:" + JSON.stringify(areaNames));

}

//展示编辑弹窗
const showDialog = (row) => {
    title.value = '编辑客户信息';
    dialogVisible.value = true;
    //数据拷贝
    Object.keys(row).forEach((key) => {
        pathmodel.value[key] = row[key];
    });
    console.log("row.id = " + row.id);

    findmodelByChance.value.str = row.id;
    
    findmodelkey.value.clientcompanyid = pathmodel.value.id;

    console.log(findmodelkey.value);

    stafflistkeyman();
    getclientscomes();

    getAllChanceByClientId();

}
const showDialogkey = (row) => {
    // console.log("row11111 = " + row.id)
    titlekey.value = '编辑客户关键人物';
    dialogVisiblekey.value = true;
    Object.keys(row).forEach((key) => {
        pathmodelkey.value[key] = row[key];
    });
    // //数据拷贝
    // pathmodelkey.value.name = row.name
    // pathmodelkey.value.introduction = row.introduction
    // pathmodelkey.value.credit = row.credit
    // //扩展i的属性，将来需要传递给后台，完成分类的修改
    // pathmodelkey.value.id = row.id;
    console.log(row.id);
}
const activeTab = ref('first'); // 当前激活的标签页
const handleTabClick = (tab) => {
    cleardatakey();
    // findmodel.value.findType = tab.props.label;
    // pathmodel.value.type = tab.props.label;
    stafflistkeyman();
    getclientscomes();
};
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>客户信息管理</span>
                <div class="extra">
                    <el-button type="primary" @click="add">添加客户</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form>
            <el-form-item label="查询条件:">
                <el-input v-model="findmodel.str" placeholder="请输入查询内容" style="width: 300px"></el-input>
                <el-button type="primary" @click="stafflist" style="margin-left: 15px;">搜索</el-button>
                <el-button @click="cleardata">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="clients" style="width: 100%">
            <el-table-column label="客户编号" prop="id"></el-table-column>
            <el-table-column label="单位" prop="clientcompanyname"></el-table-column>
            <el-table-column label="所属区域" prop="areaname"></el-table-column>
            <el-table-column label="行业" prop="pet"></el-table-column>
            <el-table-column label="地区" prop="diqu"></el-table-column>
            <el-table-column label="客户属性" prop="buyfield"></el-table-column>
            <el-table-column label="信誉评级" prop="credit"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="del(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
            @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="60%">
        <el-form :model="pathmodel" ref="formref" :rules="rules" label-width="90px" style="padding-right: 30px">
            <div class="basic-info-border">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="编号" prop="id">
                            <el-input v-model="pathmodel.id" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位名称" prop="clientcompanyname">
                            <el-input v-model="pathmodel.clientcompanyname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="所属区域" prop="areaname">
                            <el-select placeholder="请选择所属区域" clearable style="width: 350px"
                                v-model="pathmodel.areaname">
                                <el-option v-for="c in areas" :key="c.id" :label="c.name" :value="c.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="所属行业" prop="pet">
                            <el-input v-model="pathmodel.pet"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公司地址" prop="address">
                            <el-input v-model="pathmodel.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="地区" prop="diqu">
                            <el-select placeholder="请选择地区" clearable style="width: 350px" v-model="pathmodel.diqu">
                                <el-option v-for="c in diqus" :key="c" :label="c" :value="c">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="买方属性" prop="buyfield">
                            <el-select placeholder="请选择买方属性" clearable style="width: 350px"
                                v-model="pathmodel.buyfield">
                                <el-option v-for="c in buyfields" :key="c" :label="c" :value="c">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订货代表" prop="orderdaibiao">
                            <el-input v-model="pathmodel.orderdaibiao"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="basic-info-border2">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="开票电话" prop="invoicephone">
                            <el-input v-model="pathmodel.invoicephone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="pathmodel.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="传真" prop="fax">
                            <el-input v-model="pathmodel.fax"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="邮编" prop="zipcode">
                            <el-input v-model="pathmodel.zipcode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开票地址" prop="invoiceaddress">
                            <el-input v-model="pathmodel.invoiceaddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="开票银行" prop="invoicebank">
                            <el-input v-model="pathmodel.invoicebank"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行账号" prop="bankaccount">
                            <el-input v-model="pathmodel.bankaccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="税号" prop="tax">
                            <el-input v-model="pathmodel.tax"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <el-form-item label="备注" prop="comment">
                            <el-input v-model="pathmodel.comment" type="textarea" :rows="4" placeholder="请输入备注">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="basic-info-border3">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="信用等级" prop="credit">
                            <el-input v-model="pathmodel.credit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="欠款金额" prop="owed">
                            <el-input v-model="pathmodel.owed" type="number"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div v-if="title != '添加客户'">
                <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="el-tabs-style">
                    <el-tab-pane label="客户关键人物" name="first">
                        <!-- 搜索表单 -->
                        <el-form inline>
                            <el-form-item label="查询条件：">
                                <el-input v-model="findmodelkey.str" placeholder="请输入查询内容" style="width: 300px"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="stafflistkeyman">搜索</el-button>
                                <el-button type="primary" @click="addkey">添加客户关键人物</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 文章列表 -->
                        <el-table :data="keymans" style="width: 100%">
                            <el-table-column label="序号" type="index" width="80"></el-table-column>
                            <el-table-column label="姓名" prop="name"></el-table-column>
                            <el-table-column label="直接上级" prop="boss"></el-table-column>
                            <el-table-column label="职务" prop="zhiwu"></el-table-column>
                            <el-table-column label="是否主要联系人" prop="isprime"></el-table-column>
                            <el-table-column label="备注" prop="comment"></el-table-column>
                            <el-table-column label="操作" width="100">
                                <template #default="{ row }">
                                    <el-button :icon="Edit" circle plain type="primary"
                                        @click="showDialogkey(row)"></el-button>
                                    <el-button :icon="Delete" circle plain type="danger"
                                        @click="delkey(row)"></el-button>
                                </template>
                            </el-table-column>
                            <template #empty>
                                <el-empty description="没有数据" />
                            </template>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="项目机会" name="second">
                        <el-form inline>
                            <el-form-item label="查询条件：">
                                <el-input v-model="findmodelByChance.findType" placeholder="请输入查询内容" style="width: 300px"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getAllChanceByClientId">搜索</el-button>

                            </el-form-item>
                        </el-form>
                        <!-- 搜索表单 -->
                        <!-- <el-button type="primary" @click="addkey">添加客户关键人物</el-button> -->
                        <!-- 文章列表 -->
                        <el-table :data="chances" style="width: 100%">
                            <el-table-column label="序号" type="index" width="80"></el-table-column>
                            <el-table-column label="项目名称" prop="chancename"></el-table-column>
                            <el-table-column label="项目所属片区" prop="areas"></el-table-column>
                            <el-table-column label="时间" prop="chancedatetime"></el-table-column>
                            <el-table-column label="状态" prop="phase"></el-table-column>
                            <el-table-column label="备注" prop="comment"></el-table-column>
                            <!-- <el-table-column label="操作" width="100">
                                <template #default="{ row }">
                                    <el-button :icon="Edit" circle plain type="primary"
                                        @click="showDialogkey(row)"></el-button>
                                    <el-button :icon="Delete" circle plain type="danger"
                                        @click="delkey(row)"></el-button>
                                </template>
                            </el-table-column> -->
                            <template #empty>
                                <el-empty description="没有数据" />
                            </template>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="合同信息" name="third">
                        <!-- 搜索表单 -->
                        <!-- <el-button type="primary" @click="addkey">添加客户关键人物</el-button> -->
                        <!-- 文章列表 -->
                        <el-table :data="chances" style="width: 100%">
                            <el-table-column label="序号" prop="index"></el-table-column>
                            <el-table-column label="合同名称" prop="name"></el-table-column>
                            <el-table-column label="合同编号" prop="id"></el-table-column>
                            <el-table-column label="区域" prop="areaname"></el-table-column>
                            <el-table-column label="时间" prop="time"></el-table-column>
                            <el-table-column label="备注" prop="comment"></el-table-column>
                            <!-- <el-table-column label="操作" width="100">
                                <template #default="{ row }">
                                    <el-button :icon="Edit" circle plain type="primary"
                                        @click="showDialogkey(row)"></el-button>
                                    <el-button :icon="Delete" circle plain type="danger"
                                        @click="delkey(row)"></el-button>
                                </template>
                            </el-table-column> -->
                            <template #empty>
                                <el-empty description="没有数据" />
                            </template>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="客户来访信息" name="fourth">
                        <!-- 搜索表单 -->
                        <el-form inline>
                            <el-form-item label="查询条件：">
                                <el-input v-model="findmodelkey.str" placeholder="请输入查询内容" style="width: 300px"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getclientscomes">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 文章列表 -->
                        <el-table :data="clientscomes" style="width: 100%">
                            <el-table-column label="序号" type="index" width="60"></el-table-column>
                            <el-table-column label="客户序号" prop="clientcompanyid"></el-table-column>
                            <el-table-column label="客户名称" prop="clientname"></el-table-column>
                            <el-table-column label="状态" prop="status"></el-table-column>
                            <el-table-column label="日期" prop="comedate"></el-table-column>
                            <el-table-column label="备注" prop="comment"></el-table-column>
                            <template #empty>
                                <el-empty description="没有数据" />
                            </template>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="title == '添加客户' ? addstaff() : updatestaff()"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisiblekey" :title="titlekey" width="40%">
        <el-form :model="pathmodelkey" ref="formrefkey" :rules="ruleskey" label-width="125px"
            style="padding-right: 30px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系人编码" prop="code">
                        <el-input v-model="pathmodelkey.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人名称" prop="name">
                        <el-input v-model="pathmodelkey.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="称呼" prop="nickname">
                        <el-input v-model="pathmodelkey.nickname"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-select placeholder="请选择性别" clearable style="width: 350px" v-model="pathmodelkey.sex">
                            <el-option v-for="c in ['男', '女']" :key="c" :label="c" :value="c">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="直接上级" prop="boss">
                        <el-input v-model="pathmodelkey.boss"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="籍贯" prop="home">
                        <el-input v-model="pathmodelkey.home"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="职务" prop="zhiwu">
                        <el-select placeholder="请选择职务" clearable style="width: 350px" v-model="pathmodelkey.zhiwu">
                            <el-option v-for="c in ['员工', '产品经理', '外购师', '老板']" :key="c" :label="c" :value="c">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker v-model="pathmodelkey.birthday" style="width: 350px" type="date"
                            placeholder="请选择日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="个人爱好" prop="hobby">
                        <el-select placeholder="请选择职务" clearable style="width: 350px" v-model="pathmodelkey.hobby">
                            <el-option v-for="c in ['工作', '健身', '爬山', '打球']" :key="c" :label="c" :value="c">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="婚姻状况" prop="ismarry">
                        <el-select placeholder="请选择" clearable style="width: 350px" v-model="pathmodelkey.ismarry">
                            <el-option v-for="c in ['未婚', '离异', '已婚']" :key="c" :label="c" :value="c">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否主要联系人" prop="isprime">
                        <el-radio label="是" v-model="pathmodelkey.isprime">是</el-radio>
                        <el-radio label="否" v-model="pathmodelkey.isprime">否</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" prop="comment">
                        <el-input v-model="pathmodelkey.comment" type="textarea" :rows="4" placeholder="请输入备注">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisiblekey = false">取消</el-button>
                <el-button type="primary" @click="titlekey == '添加客户关键人物' ? addstaffkey() : updatestaffkey()"> 确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.el-tabs-style {
    margin-left: 5px;
    margin-right: -25px;
    /* 调整为与输入框底部对齐 */
    padding: 5px;
    /* 与输入框内边距一致 */
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.basic-info-border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border::before {
    content: "基本信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border2 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border2::before {
    content: "开票信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border3 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border3::before {
    content: "信用信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}
</style>